<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // for of允许遍历一个含有iterator接口的数据结构，并且逐个返回遍历到的值。如果没有iterator接口，则不支持使用for of遍历

        // 如果对象是一个类数组对象，那么可以使用Array.from()转为数组
        let obj = { 0: 1, 1: 2, 2: 3, length: 3 };
        obj = Array.from(obj);
        for (let value of obj) {
            console.log(value);
        }

        // 如果对象不是一个类数组，那就要给对象添加一个Symbol.iterator属性，并且指向迭代器

        // iterator的遍历过程
        // 1、创建一个指针对象，指向当前数据结构的起始位置
        // 2、第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员
        // 3、第二次调用指针对象的next方法，指针就指向数据结构的第二个成员
        // 4、不断调用指针对象的next方法，直到它指向数据结构的结束位置
        // 每一次调用next方法，都会返回数据结构当前成员信息，返回一个包含value和done的两个属性的对象
        // value是当前成员的值，done表示是否遍历已结束

        let person = {
            name: 'mika',
            age: 18,
            height: 188,
            weight: 120,
            sex: '男',
            [Symbol.iterator]() {
                // 拿到对象中所有的key值, 放在一个数组keys里
                let keys = Object.keys(this);
                // 定义数组的下标值
                let index = 0;
                let that = this;
                return {
                    next() {
                        return {
                            value: that[keys[index++]],
                            done: index >= keys.length + 1
                        }
                    }
                }
            }
        };
        for (let val of person) {
            console.log(val);
        }

        
        // 所以我们可以动动手把他写在object的原型上
        Object.prototype[Symbol.iterator] = function () {
            let that = this;
            let keys = Object.keys(this);
            let index = 0;
            return {
                next() {
                    return {
                        value: that[keys[index++]],
                        done: index >= keys.length + 1
                    }
                }
            }
        }

        let obj2 = {
            0: 1,
            1: 2
        }
        for (let val of obj2) {
            console.log(val);
        }

    </script>
</body>

</html>